<template>
  <view v-if="headers.length > 0">
    <view style="margin-bottom: 1%">
      <u-tabs
          :list="headers" :current="currentIndex"
          @click="tableClick" @change="tableChange"
          :scrollable="device === 'mobile'"
      ></u-tabs>
    </view>
    <view>
      <swiper :current="currentIndex" @change="swiperChange"
              :style="{height: getSwiperHeight()}" :touchable="false" :disable-touch="currentIndex === 3">
        <swiper-item v-for="(item, index) in headers" :key="index" >
          <seg-content-group>
            <scroll-view
              scroll-x scroll-y
              style="height: 80%"
              :show-scrollbar="true">
              <view :style="{height: getScrollHeight()}">
                <slot :name="item.id"></slot>
              </view>
            </scroll-view>
          </seg-content-group>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import appConfig from "../../api/appConfig";
import SegContentGroup from "../seg-content-group/seg-content-group";
import calCommon from "../../utils/winCal/calCommon";
import {mapState} from "vuex";

export default {
  name: "segTabSwiper",
  components: {SegContentGroup},
  props: {
    headers: {
      default: () => {return appConfig.rightMenu},
      type: Array
    },
    inRightMenu: {
      default: false,
      type: Boolean   // 页面组件的高度有不统一的地方,针对性的改
    }
  },
  mixins: [calCommon],
  computed: {
    ...mapState('app', ['showBigImgArea'])
  },
  mounted() {
    this.imgCal()
    this.tableCal()
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  methods: {
    getSwiperHeight(){
      // 这边的值要大点，头顶上是有选择栏的，否则显示不全看着不舒服
      if (this.showBigImgArea) return this.rightMenuInfo.height * 0.9 + 'px'

      if(!this.inRightMenu) return this.rightMenuInfo.height / 2 + 40 + 'px'
      return this.rightMenuInfo.height * 0.95 + 'px'
    },
    getScrollHeight(){
      if (this.showBigImgArea) return this.rightMenuInfo.height * 0.9 + 'px'

      if(!this.inRightMenu) return this.rightMenuInfo.height / 2 + 'px'
      return this.rightMenuInfo.height * 0.8 + 'px'
    },
    getHeight(){
      return this.rightMenuInfo.height / 2 + 40 + 'px'
    },
    tableClick(item) {
      this.currentIndex = item.index
    },
    tableChange(item) {

    },
    swiperChange(item){
      this.currentIndex = item.detail.current
    }
  }
}
</script>

<style scoped>

</style>
